<template>
  <a-modal
    :maskClosable="false"
    :title="info && info.id ? '编辑服务商' : '新建服务商'"
    :width="1000"
    :visible="showModal"
    :confirm-loading="confirmLoading"
    :ok-type="'primary'"
    @ok="confirmOk"
    @cancel="cancel"
  >
    <a-form :form="form">
      <a-row :gutter="[24, 0]">
        <a-col :span="12">
          <a-form-item class="mb-15" label="服务商简称" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入服务商简称"
              v-decorator="['name', { rules: [{ required: true, whitespace: true, message: '请输入服务商简称' }] }]"
              maxLength="16"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item class="mb-15" label="公司全称" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入公司全称"
              v-decorator="['fullName', { rules: [{ message: '请输入公司全称' }] }]"
              maxLength="64"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[24, 0]">
        <a-col :span="12">
          <a-form-item class="mb-15" label="联系人姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入联系人姓名"
              v-decorator="[
                'contactName',
                { rules: [{ required: true, whitespace: true, message: '请输入联系人姓名' }] },
              ]"
              maxLength="16"
            ></a-input>
          </a-form-item>
        </a-col>
		<a-col :span="12">
		  <a-form-item class="mb-15" label="企业社会统一信用代码" :label-col="labelCol" :wrapper-col="wrapperCol">
		    <a-input placeholder="请输入企业社会统一信用代码" v-decorator="[
		      'taxNum',
		      {rules: [{whitespace: false,message: '请输入企业社会统一信用代码'}]}
		    ]" maxLength="64"></a-input>
		  </a-form-item>
		</a-col>
		<a-col :span="12">
		  <a-form-item class="mb-15" label="法人姓名" :label-col="labelCol" :wrapper-col="wrapperCol">
		   <a-input placeholder="请输入法人姓名" v-decorator="[
		     'legalPersonName',
		     {rules: [{whitespace: false,message: '请输入法人姓名'}]}
		   ]" maxLength="64"></a-input>
		  </a-form-item>
		</a-col>
		<a-col :span="12">
		  <a-form-item class="mb-15" label="法人身份证号" :label-col="labelCol" :wrapper-col="wrapperCol">
		   <a-input placeholder="请输入法人身份证号" v-decorator="[
		     'legalPersonIdNum',
		     {rules: [{whitespace: false,message: '请输入法人身份证号'}]}
		   ]" maxLength="64"></a-input>
		  </a-form-item>
		</a-col>
        <a-col :span="12">
          <a-form-item class="mb-15" label="联系电话" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入联系电话"
              v-decorator="[
                'contactPhone',
                {
                  rules: [
                    { required: true, whitespace: true, message: '请输入联系电话', validator: $utils.phoneValidator },
                  ],
                },
              ]"
              maxLength="16"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[24, 0]">
        <a-col :span="12">
          <a-form-item class="mb-15" label="联系邮箱" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-input
              placeholder="请输入联系邮箱"
              v-decorator="['contactEmail', { rules: [{ message: '请输入联系邮箱', type: 'email' }] }]"
              maxLength="64"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item class="mb-15" label="是否启用" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-switch
              checked-children="开"
              un-checked-children="关"
              v-decorator="['isEnabled', { valuePropName: 'checked' }]"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[24, 0]">
       
        <a-col :span="14">
          <section class="flex items-center">
            <a-form-item
              class="mb-15"
              label="自动结算周期（天）:"
              :labelCol="{ span: 12, offset: 0 }"
              :wrapperCol="{ span: 12, offset: 0 }"
            >
              <a-input-number
                class="w-full"
                allow-clear
                placeholder="请输入自动结算周期"
                :min="0"
                :precision="0"
                :max="99"
                v-decorator="[
                  'settleDays',
                  {
                    rules: [{ required: true, message: '请输入自动结算周期' }],
                  },
                ]"
              />
            </a-form-item>
            <a-tooltip class="mb-15 ml-10" placement="top" title="0为关闭自动结算">
              <a-icon type="info-circle" />
            </a-tooltip>
          </section>
        </a-col>
		<a-col :span="10">
		  <a-form-item class="mb-15 upload-list" :colon="false">
		    <template #label>
		      <p class="ml- mb-0 ant-form-item-required">商用形象</p>
		    </template>
		    <section class="flex">
		      <multipleShowList
		        ref="fileList"
		        :scene="6"
		        :fileLength="1"
		        @uploadSuccess="uploadAvatarSuccess"
		        @removeFile="removeFile"
		      />
		    </section>
		  </a-form-item>
		</a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import multipleShowList from '@/components/Upload/multipleShowList'
import { createVendor, editVendor } from '@/api/vendor'

export default {
  name: 'supplierCreateOrEdit',
  components: { multipleShowList },
  props: {
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      showModal: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      fileList: [],
      info: null,
    }
  },
  methods: {
    codeValidator(rule, value, callback) {
      const amount = value && value.trim()
      const isCode = /^[a-zA-Z]+$/
      if (typeof amount === 'undefined') {
        callback(new Error('请输入服务商编码'))
      }
      if (amount * 1 === 0 || (amount && !isCode.test(amount))) {
        callback(new Error('仅支持英文'))
      } else {
        callback()
      }
    },
    removeFile(data) {
      this.fileList.splice(
        this.fileList.findIndex((item) => item.uid === data.uid),
        1
      )
    },
    uploadAvatarSuccess(data) {
      this.fileList = data
    },
    confirmOk() {
      this.form.validateFields((err, values) => {
        if (!err) {
          const { fileList, info } = this
          if (!fileList.length) return this.$message.warning('请上传商用形象！')
          const { isEnabled } = values
          this.confirmLoading = true
          const fun = info && info.id ? editVendor : createVendor
          fun({
            id: info && info.id ? info.id : undefined,
            ...this.$utils.trimValue(values),
            logoUrl: fileList[0].url,
            isEnabled: typeof isEnabled === 'undefined' ? true : isEnabled,
          })
            .then(() => {
              this.$message.success(info && info.id ? '编辑成功！' : '新建成功！')
              this.$emit('upload')
              this.cancel()
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    },
    createOrEditData(info) {
      console.log(info);
      
      this.showModal = true
      if (info) {
        this.info = info
        this.$nextTick(() => {
          if (info.logoUrl) {
            const fileList = [
              {
                name: 'image.png',
                status: 'done',
                url: info.logoUrl,
                uid: this.$utils.uuid(),
              },
            ]
            this.fileList = fileList
            this.$refs.fileList.setFileList(fileList)
          }
          this.form.setFieldsValue({ ...info })
        })
        return false
      }
      this.$nextTick(() => {
        this.form.setFieldsValue({ isEnabled: true })
      })
    },
    cancel() {
      this.fileList = []
      this.$refs.fileList.setFileList([])
      this.confirmLoading = false
      this.form.resetFields()
      this.showModal = false
    },
  },
}
</script>

<style lang="less" scoped>
.upload-list {
  /deep/ .ant-form-item-label {
    height: 30px;
    line-height: normal;
  }
}
</style>